<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>The HTML Presentation Framework</title>
  <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
  <meta name="author" content="Hakim El Hattab">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      background: #0A0F23;
    }

    * {
      margin: 0;
      padding: 0;
    }

  </style>
</head>

<body>
  <div id="main" style="width: 100%;height:100%;"></div>
  <script src="../../components/echarts-4.0.4.min.js"></script>
  <script>
    var pieChart = echarts.init(document.getElementById('main'));

    var data = ['西安近代化学研究所', '西北有色金属研究院', '中国科学院西安光学精密机械研究所', '西安空间无线电技术研究所', '中国航空工业集团西安飞机设计研究所', '西北核技术研究所', '中国航空工业集团第六三一研究所', '中国航天科技集团第九研究院第七七一研究所', '中国航空工业第六一八研究所', '中国飞机强度研究所'];
    var data1 = ['462', '402', '390', '369', '312', '233', '210', '146', '131', '88'];
    for (var i = 0; i < data.length; i++) {
      if (data[i] == '2017') {
        data[i] = {
          value: '2017',
          textStyle: {
            color: '#Fff'
          }
        }
      }
    }
    pieOption = {
      title: {
        text: '2017年底全省科研机构发明专利拥有量前10名',
        left: 'center',
        top: '0%',
        textStyle: {
          color: '#fff',
          fontSize: 22
        }
      },
      /*legend: {
		        data: ['到访次数', '到访人数'],
		        align: 'left',
		        left: 10
		    },*/
      grid: {
        right: '13%',
        left: '15%',
        top: '25%',
        bottom: '15%'

      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        }
      },
      legend: {
        left: '90px',
        top: '10px',
        data: ['次数'],
        padding: [0, 100, 0, 0],
        textStyle: {
          color: '#fff',
          fontSize: 16

        },
        itemWidth: 15,
        itemHeight: 10
      },
      xAxis: {
        triggerEvent: true,
        data: data,
        axisLabel: {
          interval: 0,
          show: true,
          rotate: -30,
          textStyle: {
            color: "#fff",
            fontSize: 16
          },
          formatter: function(value) {
            if (value.length > 4) {
              return value.substring(0, 4) + "...";
            } else {
              return value;
            }
          }
        },
        axisLine: {
          lineStyle: {
            show: true,
            color: "#fff",
            width: 1
          }
        }
      },
      yAxis: [{
        type: 'value',
        min: 0,
        max: 500,
        name: '件',
        interval: 50,
        nameTextStyle: {
          color: "#fff",
          fontSize: 16
        },
        axisLabel: {
          interval: 0,
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: 16
          }
        },
        axisLine: {
          lineStyle: {
            color: "#F3F3F3",
            width: 1
          }
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,02)",
            width: 1
          },
          show: false
        }
      }],
      series: [{
        name: '人数',
        type: 'bar',
        barWidth: '40%',
        silent: true,
        itemStyle: {
          normal: {
            color: '#1FBCD2'
          }
        },
        data: data1
      }]
    };

    pieChart.setOption(pieOption);

  </script>
</body>

</html>
